<template>
    <aside class="cus-image-attribute-wrap m-b bt-line" v-if="mixinState.mSelectOneType==='image'">
        <div class="cus-image-attribute__item m-b">
            <h4 class="cus-title no-select">裁剪</h4>
            <div class="clip-path cursor" title="裁剪成圆形" @click="addClipPath"></div>
        </div>
        <div class="cus-image-attribute__item m-b">
            <h4 class="cus-title no-select">R</h4>
            <section class="select-size">
                <n-input-number 
                    size="small" 
                    :min="1" 
                    :max="1000" 
                    v-model:value="image.radius" 
                    placeholder="请输入" 
                    :on-update:value="onRadiusUpdate"/>
            </section>
        </div>
    </aside>
</template>

<script setup name="ImageAttribute">
import useSharedCore from '@/hooks/shared'

const { coverEditor, mixinState } = useSharedCore();
const counter = ref(0)
const image = reactive({
    src: '',
    circle: null,
    radius: 180
})

const onRadiusUpdate = val => {
    image.radius = val
    setAttributes()
}

function addClipPath() {
    counter.value++
    setAttributes()
}

function setAttributes(key, value) {
    const node = coverEditor?.canvas?.getActiveObject() || null
    image.circle = new fabric.Circle({
        radius: image.radius,
        originX: 'center',
        originY: 'center'
    })
    
    if (node) {
        let clipPath = null
        if (counter.value % 2 === 0) {
            clipPath = null
        } else clipPath = image.circle

        node.set({clipPath})
        coverEditor.canvas.renderAll()
    }
}

</script>

<style lang="scss" scoped>
    .cus-image-attribute {
        &__item {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            .cus-title {
                font-size: 14px;
                margin-right: 5px;
            }
            .clip-path {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                border: 1px solid $activeColor;
            }
            .select-size {
                flex:1;
            }
        }
    }
</style>